<template>
  <div>
    <el-dialog
      :title="editFlag ? '编辑决策点' : '新增决策点'"
      class="addDialog"
      :visible.sync="dialogVisible1"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="55%"
    >
      <el-form
        ref="addform"
        :model="vpnform"
        :rules="rulesVpnform"
        label-width="110px"
      >
        <el-form-item label="主体属性:" prop="mainBody">
          <el-select v-model="vpnform.mainBody">
            <el-option
              v-for="item in mainBodys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境属性:" prop="env">
          <el-select v-model="vpnform.env">
            <el-option
              v-for="item in envList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客体属性:" prop="keBody">
          <el-select v-model="vpnform.keBody">
            <el-option
              v-for="item in keBodys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联关系:" prop="relate">
          <el-select v-model="vpnform.relate">
            <el-option
              v-for="item in relates"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="决策场景:" prop="decision">
          <el-select v-model="vpnform.decision">
            <el-option
              v-for="item in decisions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联策略:" prop="strategy">
          <el-select v-model="vpnform.strategy">
            <el-option
              v-for="item in strategyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitaddForm('addform')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { getList } from "@/api/yybl/watermark";

export default {
  name: "rule",
  components: {},
  mixins: [table],
  props: {
    dialogVisible1: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    scene: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columnConfigs,
      sceneVisible: false,
      mainBodys: [
        {
          label: "组织",
          value: "1",
        },
        {
          label: "用户",
          value: "2",
        },
        {
          label: "类型",
          value: "3",
        },
        {
          label: "职级",
          value: "4",
        },
        {
          label: "岗位",
          value: "5",
        },
      ],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      strategyList: [
        {
          label: "放行策略",
          value: "0",
        },
        {
          label: "阻断策略",
          value: "1",
        },
        {
          label: "二次认证",
          value: "2",
        },
      ],
      envList: [
        {
          label: "登录IP",
          value: "0",
        },
        {
          label: "登录时间",
          value: "1",
        },
        {
          label: "登录频次",
          value: "2",
        },
      ],
      keBodys: [
        {
          label: "资产类型",
          value: "0",
        },
        // {
        //   label: "具体资产",
        //   value: "1",
        // },
        {
          label: "涉密等级",
          value: "2",
        },
        // {
        //   label: "",
        //   value: "3",
        // },
      ],
      relates: [
        {
          label: "已关联",
          value: "0",
        },
        {
          label: "未关联",
          value: "1",
        },
      ],
      decisions: [
        {
          label: "4A登录",
          value: "0",
        },
        {
          label: "单点登录",
          value: "1",
        },
        {
          label: "堡垒机登录",
          value: "2",
        },
      ],
      vpnform: {
        mainBody: "",
        env: "",
        keBody: "",
        relate: "",
        decision: "",
        strategy: "",
      },
      rulesVpnform: {
        mainBody: [
          { required: true, message: "请选择主体属性", trigger: "change" },
          //   { validator: validateIpPort, trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        env: [
          { required: true, message: "请选择环境属性", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        keBody: [
          { required: true, message: "请选择客体属性", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        relate: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请选择关联关系", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        decision: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请选择决策场景", trigger: "change" },
          // { type: "number", message: "角度必须为数字值" },
        ],
        strategy: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请选择关联策略", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
      },
      selectTion: [],
      typeTion: {
        children: [],
      },
    };
  },
  watch: {},
  computed: {
    columnConfigs1() {
      console.log(this.vpnform.scene);
      return this.columnConfigs.filter(
        (i) => i.index == 4 || this.vpnform.scene.includes(i.index)
      );
    },
    showForm() {
      if (this.vpnform.type == 0) {
        if (this.vpnform.attr == 0) {
          return 0;
        } else if (this.vpnform.attr == 1) {
          return 1;
        } else {
          return 2;
        }
      } else {
        return 2;
      }
    },
  },
  methods: {
    changeSence() {
      this.sceneVisible = true;
    },
    handleSceneClose() {
      this.sceneVisible = false;
      // this.selectTion.splice(0);
      this.$refs.table.clearSelection();
      // this.vpnform.showSence = this.selectTion.map((i) => i.content).join(";");
    },
    formatTrancy(val) {
      let a = Number(val);
      return Math.round(a * 100) + "%";
    },
    formatTooltip(val) {
      return val + "%";
    },
    formatTooltipRotation(val) {
      return val + "°";
    },
    formatTooltipSize(val) {
      return val;
    },
    add(row) {
      this.vpnform = {
        mainBody: "",
        env: "",
        keBody: "",
        relate: "",
        decision: "",
        strategy: "",
      };
      this.$nextTick(() => {
        this.$refs?.addform?.clearValidate();
      });
    },
    edit(row) {
      const { mainBody, env, keBody, relate, decision, strategy } = row;
      this.vpnform = {
        mainBody,
        env,
        keBody,
        relate,
        decision,
        strategy,
      };
      this.$nextTick(() => {
        this.$refs?.addform?.clearValidate();
      });
    },
    submitaddForm(val) {
      this.$refs["addform"].validate((val) => {
        this.$emit("submit", val);
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible1", false);
    },
    refresh() {
      this.getlists(getList, {});
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectTion = val;
    },
    submitScene() {
      this.vpnform.showSence = this.selectTion.map((i) => i.content).join(";");
      this.sceneVisible = false;
      this.$refs.table.clearSelection();
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.celuebiao {
  // display: flex;
  padding: 10px;
  border: 1px solid #e8e8e8;
  width: 100%;
  ul {
    list-style: none;
    display: flex;
    width: 100%;
    li {
      flex: 17%;
    }
    li:last-child {
      flex: 49%;
    }
  }
}
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
.sceneDialog {
  ::v-deep .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
}

::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}

::v-deep .el-drawer {
  min-width: 700px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
</style>
